<template>
    <div class="container">
        <div class="handle-box">
                <el-form ref="form" :model="form" label-width="120px" class="flex">
                    <el-form-item label="垃圾类型：">
                        <el-input v-model="name" placeholder="请输入名称" class="handle-input mr10" @input="mohu()"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                        <el-button type="success" icon="el-icon-circle-plus-outline" @click="addvialog()">新增</el-button>
                    </el-form-item>
                    
                </el-form>
            </div>
            <el-table
                :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            >
                <el-table-column prop="RULE_ID" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="RUBBISH_NAME" label="垃圾品名"></el-table-column>
                <el-table-column prop="TYPE_NAME" label="垃圾类型"></el-table-column>
                <el-table-column label="投放一公斤所产积分">
                    <template slot-scope="scope">{{scope.row.KILO_POINTS}}</template>
                </el-table-column>
                <!-- <el-table-column prop="address" label="积分详情"></el-table-column> -->
               
                <!-- <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <el-tag
                            :type="scope.row.state==='成功'?'success':(scope.row.state==='失败'?'danger':'')"
                        >{{scope.row.state}}</el-tag>
                    </template>
                </el-table-column> -->

                <el-table-column  label="分数规则(分)">
                    <template slot-scope="scope">+{{scope.row.POTINS_RULE}}</template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        <el-button
                            type="text"
                            @click="handdelete(scope.$index, scope.row)"
                            style="color:red"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page="currentPage"  
                    :page-size="pageSize"
                    :total="tableData.length"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
            <!-- 编辑弹出框 -->
            <el-dialog v-dialogDrag title="编辑积分" :visible.sync="editVisible" width="50%">
                <el-form ref="editfrom" :model="editfrom" :rules="rules" label-width="70px" class="flex">
                    <!-- <el-form-item label="垃圾详情：" :label-width="labelswidth">
                        <el-input v-model="editfrom.name"></el-input>
                    </el-form-item> -->
                    <el-form-item label="类型名称：" :label-width="labelswidth"  class="wid50">
                        <el-select v-model="editfrom.TYPE_ID" placeholder="请选择" @change="changevalue">
                          <el-option v-for="item in typeoptions" :key='item.TYPE_ID' :label="item.TYPE_NAME" :value="item.TYPE_ID" >
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="垃圾品名：" :label-width="labelswidth"  class="wid50">
                        <el-select v-model="editfrom.RUBBISH_NAME" placeholder="请选择">
                          <el-option v-for="item in dictonaryoptions" :key='item.RUBBISH_ID' :label="item.RUBBISH_NAME" :value="item.RUBBISH_ID" >
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="投放一公斤所产积分：" :label-width="labelswidth"  class="wid50">
                        <el-input v-model="editfrom.KILO_POINTS" oninput = "value=value.replace(/[^\d]/g,'')"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="积分类型：" :label-width="labelswidth">
                        <el-input v-model="editfrom.address"></el-input>
                    </el-form-item> -->
                    <el-form-item label="积分规则（分）：" :label-width="labelswidth"  class="wid50">
                        <el-input v-model="editfrom.POTINS_RULE"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveeditform">确 定</el-button>
                </span>
            </el-dialog>

            <el-dialog v-dialogDrag title="新增积分"  :visible.sync="addeditVisible" width="50%">
                <el-form ref="addform" :model="addform" :rules="rules" label-width="70px" class="flex">
                    <!-- <el-form-item label="垃圾详情：" :label-width="labelswidth">
                        <el-input v-model="addform.name"></el-input>
                    </el-form-item> -->
                    <el-form-item label="类型名称：" :label-width="labelswidth" class="wid50" prop="TYPE_ID">
                        <el-select v-model="addform.TYPE_ID" placeholder="请选择" @change="changevalue">
                          <el-option v-for="item in typeoptions" :key='item.TYPE_ID' :label="item.TYPE_NAME" :value="item.TYPE_ID" >
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="垃圾品名：" :label-width="labelswidth" class="wid50" prop="RUBBISH_ID">
                        <el-select v-model="addform.RUBBISH_ID" placeholder="请选择" >
                          <el-option v-for="item in dictonaryoptions" :key='item.RUBBISH_ID' :label="item.RUBBISH_NAME" :value="item.RUBBISH_ID" >
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="投放一公斤所产积分：" :label-width="labelswidth" class="wid50" prop="KILO_POINTS">
                        <el-input v-model="addform.KILO_POINTS" oninput = "value=value.replace(/[^\d]/g,'')">></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="积分类型：" :label-width="labelswidth">
                        <el-input v-model="addform.address"></el-input>
                    </el-form-item> -->
                    <el-form-item label="积分规则（分）：" :label-width="labelswidth" class="wid50" prop="POTINS_RULE">
                        <el-input v-model="addform.POTINS_RULE" >></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addeditVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveEdit('addform',addform)">确 定</el-button>
                </span>
            </el-dialog>
        </div>
</template>
<script>
import '../../assets/css/common.css'

export default {
    data(){
        return{
              currentPage:1, //初始页
                pagesize:10,    //    每页的数据
                userList: [],
                address:'',
                name:'',
                labelwidth:'100px',
                labelswidth:'170px',
                addeditVisible:false,
                addform:{
                    TYPE_ID: '',
                    RUBBISH_ID: '',
                    KILO_POINTS: '',
                    POTINS_RULE: ''
                },
                rules: {
              TYPE_ID: [
                { required: true, message: '请选择类型名称', trigger: 'change' },
                { required: true, message: '请选择类型名称', trigger: 'blur' }
              ],
              RUBBISH_ID: [
                { required: true, message: '请选择垃圾品名', trigger: 'change' },
                { required: true, message: '请选择垃圾品名', trigger: 'blur' }
              ],
              KILO_POINTS: [
                { required: true, message: '请输入一公斤所产积分', trigger: 'blur' }
              ],
              POTINS_RULE: [
                { required: true, message: '请输入积分规则', trigger: 'blur' }
              ]
            },
            tableData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {
                name: ''
            },
            editfrom:{
                
            },
            idx: -1,
            id: -1,
            dictonaryoptions:''
        }
    },
    created() {
        this.getdata();
        this.gettypedata()
    },
    methods: {
        addvialog(){
            this.addeditVisible = true
        },
        async gettypedata(){
            const {data} = await this.$axios.get(this.$url+'/GetRubbishTypeApi');
            this.typeoptions = data.filter(item=>{
                // console.log(item)
                return item
            })
        },
        async getdata(){
            const {data} =await this.$axios.get(this.$iurl+'/GetCumulativeIntegralRuleApi')
            this.tableData = data.filter(item=>{
                return item 
                // console.log(item)
            })
        },
        async changevalue(e){
            console.log(e)
            const {data} = await this.$axios.get(this.$url+'/GetRubbishDictonaryApi?id='+e)
            this.dictonaryoptions = data.filter(item=>{
                // console.log(item)
                return item
            })
        },
        async handdelete(index,row){
            console.log(row)
            this.$confirm('确定要删除吗？','提示',{
                type: 'warning'
            }).then(()=>{
                this.$axios({
                    url:this.$iurl + '/DeleteCumulativeIntegralRuleApi',
                    method: 'get',
                    params: {
                        RULE_ID: row.RULE_ID
                    }
                }).then(res=>{
                    if(res.data.IsSucess){
                        this.getdata()
                    }
                })
            })
            
        },
        search(){
            console.log(this.name)
          var newdate = [];
           if(this.name){
               this.tableData.filter(item=>{
                   if(item.TYPE_NAME.includes(this.name)){
                       newdate.push(item)
                   }
               })
           }else{
               this.getdata()
           }
           this.tableData = newdate
        },
        // 模糊查询
        mohu(){
        var newdate = [];
           if(this.name){
               this.tableData.filter(item=>{
                   if(item.TYPE_NAME.includes(this.name)){
                       newdate.push(item)
                   }
               })
           }else{
               this.getdata()
           }
           this.tableData = newdate
        },
        // 编辑操作
        handleEdit(index, row) {
            console.log(index,row)
            this.editfrom = Object.assign({}, row); 
            // this.idx = index;
            // this.form = row;
            this.editVisible = true;
            // this.editstudentForm = true; //编辑信息模态框显示
            // this.editsForm = Object.assign({}, row);  获得所有数据显示在编辑信息模态框里面
        },
        //保存编辑
        saveeditform(){
            let studenteList=this.editfrom;
            this.$axios({
                url:this.$iurl+'/UpdateCumulativeIntegralRuleApi',
                method: 'get',
                params:{
                    RULE_ID: studenteList.RULE_ID,
                    RUBBISH_ID: studenteList.RUBBISH_ID,
                    TYPE_ID: studenteList.TYPE_ID,
                    KILO_POINTS: studenteList.KILO_POINTS,
                    POTINS_RULE:  studenteList.POTINS_RULE
                }
            }).then(item =>{
                console.log(item)
                if(item.data.IsSucess){
                    this.getdata()
                    this.editVisible = false;
                    this.$message.success('编辑成功')
                    
                }
            })
        },
        // 保存新增
        saveEdit(ruleform,addform) {
            console.log(this.$refs[ruleform])
            this.$refs[ruleform].validate((valid) => {
              if (valid) {
                this.$axios({
                url: this.$iurl+'/AddCumulativeIntegralRuleApi',
                method: 'get',
                params:{
                    RUBBISH_ID: addform.RUBBISH_ID,
                    TYPE_ID: addform.TYPE_ID,
                    KILO_POINTS: addform.KILO_POINTS,
                    POTINS_RULE: addform.POTINS_RULE
                }
                }).then(item =>{
                    if(item.data.IsSucess){
                        this.$message.success('新增成功')
                        this.getdata()
                        this.addform = Object.assign({},undefined)
                    }
                }).catch(error=>{
                    console.log(error)
                })
                 this.addeditVisible = false
              } else {
                
                
              }
            });
            
           
            // this.editVisible = false;
            // this.$message.success(`修改第 ${this.idx + 1} 行成功`);
            // this.$set(this.tableData, this.idx, this.form);
        },
        // 分页导航
        handlePageChange(currentPage) {
            this.currentPage = currentPage;
            // this.$set(this.query, 'pageIndex', val);
            // this.getData();
        },
        handleSizeChange(size){
            this.pagesize = size;
        }
    },
    computed:{
        // mohu(){
        //     if(this.name){
        //         return this.tableData.filter(item => {
        //             console.log(item.name.includes(this.name))
        //             if(item.name.includes(this.name)){
        //                 console.log(item)
        //             }
        //             // console.log(item)
        //         })
        //     }else{
                
        //         return this.tableData
        //     }
        // }
    }
}
</script>
<style scoped>
.el-select{
    width:100%;
}
</style>